<template>
  <div class="line-chart bg-c-base flex flex-column">
    <div class="title-wrapper">
      <div class="title">外卖骑手概况</div>
      <div class="sub-title">Rider Growth rate</div>
    </div>
    <div class="flex-1">
      <v-chart :options="options" ref="chart"></v-chart>
    </div>
  </div>
</template>

<script>
import { reactive, getCurrentInstance, onMounted, watch } from 'vue';
import mock from '@/hooks/mock';
export default {
	name : 'lineChart',
	setup () {
		let { lineChart } = reactive(mock());
		const colors = ['rgb(209,248,139)', 'rgb(115,201,245)', 'rgb(124,136,146)'];
		let options = reactive({
			color : colors,
			tooltip : {
				trigger : 'none',
				axisPointer : {
					type : 'cross',
				},
			},
			legend : {
				top : 20,
				right : 40,
				icon : 'rect',
				textStyle : {
					fontSize : 16,
					color : '#fff',
				},
				data : [],
			},
			grid : {
				top : 60,
				bottom : 30,
				left : 80,
				right : 40,
			},
			xAxis : [
				{
					type : 'category',
					axisTick : { show : false },
					axisLine : {
						onZero : false,
						lineStyle : {
							color : '#fff',
						},
					},
					axisLabel : {
						fontSize : 16,
					},
					data : lineChart.axisData,
				},
				{
					type : 'category',
					axisTick : { show : false },
					axisLine : { show : false },
				},
			],
			yAxis : [
				{
					type : 'value',
					axisTick : { show : false },
					axisLine : {
						onZero : false,
						lineStyle : {
							color : '#fff',
						},
					},
					axisLabel : {
						fontSize : 16,
					},
					splitLine : {
						lineStyle : {
							type : 'dotted',
						},
					},
				},
			],
			series : [],
		});
		let update = () => {
			options.legend.data = lineChart.legendData;
			return lineChart.data.map((item, i) => {
				return {
					name : lineChart.legendData[i],
					type : 'line',
					smooth : true,
					lineStyle : {
						width : 2,
					},
					symbol : 'none',
					data : item,
				};
			});
		};
		options.series = update();
		onMounted(() => {
			let dom = getCurrentInstance().ctx.$refs['chart'];
			watch(
				() => lineChart.legendData,
				() => {
					options.series = update();
					dom.init();
				}
			);
		});
		return {
			options,
		};
	},
};
</script>
<style lang="scss" scoped>
.line-chart {
  height: 360px;
  margin-top: 20px;
  padding: 20px 40px;
  box-sizing: border-box;
  .title-wrapper {
    padding: 20px 40px 0;
    box-sizing: border-box;
    .title {
      font-size: 32px;
    }
    .sub-title {
      font-size: 16px;
      margin-top: 10px;
    }
  }
}
</style>
